<template>
<div>
  <el-tabs type="border-card">
   <el-tab-pane label="用户投诉">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名" >
        <el-input v-model="form.username"></el-input>
      </el-form-item>



      <el-form-item label="联系方式" style="width: 50%">
        <el-input  placeholder="请输入手机号码" v-model="form.phonenum"></el-input>
      </el-form-item>
      <el-form-item label="投诉内容">
        <el-input type="textarea" v-model="form.content"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
<!--        <el-button type="success" @click="showFeedbackDialog">查看反馈</el-button>-->
      </el-form-item>
    </el-form>
        <!-- 弹出对话框 -->
  <el-dialog
      title="投诉反馈"
      :visible.sync="dialogVisible"
      width="60%"
      @close="closeDialog">
    <el-table :data="feedbackList" style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="content"
          label="反馈内容">
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
   </el-tab-pane>

    <el-tab-pane label="投诉查询">
      <div>
        <div>
          <el-input style="width: 200px" placeholder="查询用户名" v-model="username"></el-input>
          <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </div>
        <div style="margin: 10px 0">
<!--          <el-button type="primary" plain @click="handleAdd">新增</el-button>-->
          <el-button type="danger" plain @click="delBatch">批量删除</el-button>
        </div>
        <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection"  align="center"></el-table-column>
          <el-table-column prop="id" label="序号" ></el-table-column>
          <el-table-column prop="username" label="姓名"></el-table-column>

          <el-table-column prop="content" label="内容" show-overflow-tooltip>
            <template v-slot="{ row }">
              <el-popover
                  placement="top-start"

                  width="200"
                  trigger="click"
                  :content="row.content">
                <el-button slot="reference">详情</el-button>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="time" width="150" label="发布时间"></el-table-column>

          <el-table-column prop="callback" label="反馈">
            <template v-slot="{ row }">
              <el-popover
                  placement="top-start"

                  width="200"
                  trigger="click"
                  :content="row.callback">
                <el-button slot="reference">详情</el-button>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="投诉进度" width="70">
            <template v-slot="scope">
              <el-tag type="info" v-if="scope.row.status === '未处理'">未处理</el-tag>
              <el-tag type="warning" v-if="scope.row.status === '处理中'">处理中</el-tag>
              <el-tag type="success" v-if="scope.row.status === '已完成'">已完成</el-tag>
              <!-- 根据实际状态添加更多的条件渲染 -->
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="180">
            <template v-slot="scope">
<!--              <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">反馈</el-button>-->
              <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 10px 0">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>



      </div>
    </el-tab-pane>
  </el-tabs>

</div>




</template>

<script>
export default {
  name: "Complain",

  data() {
    return {

      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 5,  // 每页显示的个数
      username: '',

      total: 0,
      fromVisible: false,



      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ]
      },
      ids: [],
      content: '',
      dynamicContent: '',
      options: [{
        value: '未处理',
        label: '未处理'
      }, {
        value: '处理中',
        label: '处理中'
      }, {
        value: '已完成',
        label: '已完成'
      }],
      value: '',

      form: {
        name: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        address: ''
      },
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),

      userPhone: '', // 这里需要根据实际情况获取当前用户的手机号码
      feedbackList: [],
      dialogVisible: false,
    };


  },

  methods: {

    handleContentClick(row) {
      // 更新dynamicContent为当前行的content值
      this.dynamicContent = row.content;
    },
    changeOpen(form) {
      // 调用更新的接口  更新数据到数据库
      this.form = JSON.parse(JSON.stringify(form))
      this.sendSaveRequest()   // 直接发请求就可以了
    },
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/complain/delete/batch', { data: this.ids }).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    del(id) {
      this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/complain/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true   // 打开弹窗
    },
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.sendSaveRequest()
        }
      })
    },
    sendSaveRequest() {
      this.$request({
        url: this.form.id ? '/complain/update': '/complain/add',
        method: this.form.id ? 'PUT' : 'POST',
        data: this.form
      }).then(res => {
        if (res.code === '200') {  // 表示成功保存
          this.$message.success('保存成功')
          this.load(1)
          this.fromVisible = false
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    },
    reset() {
      this.username = ''
      this.load()
    },
    load(pageNum) {  // 分页查询
      if (pageNum)  this.pageNum = pageNum
      this.$request.get('/complain/selectByPages', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },


    onSubmit() {
      console.log('submit!'),
          this.$request({
            url: this.form.id ? '/complain/update' : '/complain/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')


            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
    },


    handleChange(value) {


      console.log(value);
    }

  }
}
</script>

<style scoped>

</style>